<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button1> </button1>


    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script>
        const bus =new Vue()
        var Cli = {
            template: `
           <div>
           <h3>我是子组件</h3>
           <button @click="dianji">我是点击按钮</button>
           {{ title}}
           <ul v-for="item in Arr">
            <li>{{ item}}</li>
            </ul>
            <button @click="dian">我是向我兄发送数据的按钮</button>
           </div>
           `
            ,
            props: {
                title: {
                    type: String,
                    required: true
                },
                Arr: {
                    type: Array,
                    default: () => [1, 2, 3, 4]
                }

            },
            data() {
                return {
                    msg: '我是龙哥他爷爷Cli的内容'
                }
            },
            methods: {
                dianji() {
                    this.$emit('diandian', this.msg)
                },
                dian(){
                    bus.$emit('xiodi',this.msg)
                }
            }


        }

        var Cli1={
            template:`
                <div>
                <h2>
                {{ msg}}
                 </h2>
                {{ title}}
                <button @click="dian"> 我是Cli1向父级发送资料的按钮</button>
                </div>
            `,
            props:["title"],
            data(){
                return{
                    msg:"我是cli1的内容"
                }
            },
          mounted(){
              bus.$on('xiodi',(msg)=>{
                  this.msg=msg
              })
          },
          methods:{
              dian(){
                  this.$emit('piupiu',this.msg)
              }
          }
        }
        var button = {
            template: `
            <div>
            <h1>
                我是父组件
            </h1>
            <h2>{{ msg}}</h2>
            <p>{{cli1}}</p>
            <hr>
            <cli @diandian="fn" :title="name" ref="cli"></cli>
            <hr>
            <cli1 :title="cli1" ref='cli1' @piupiu="fu"></cli1>
            </div>
            `,
            data() {
                return {
                    msg: '我是龙哥他爹',
                    name:"我是父组件传过来给Cli的内容",
                    cli1:'我是父组件传过来给cli1的内容',

                }
            },
            components: {
                Cli: Cli,
                Cli1:Cli1
            },
            methods: {
                fn(msg) {
                    this.msg = msg
                },
                fu(msg){
                    this.cli1=msg
                }

            },
            mounted(){
                console.log(this.$refs.cli);
                console.log(this.$refs.cli1.msg);
            }
        }


        Vue.component('button1', button)
        var vm = new Vue({
            el: "#app"
        })
    </script>


</body>

</html>